<div class="h-100 d-flex flex-column pl-2 py-2 flex-fill" style="color:#000">
  <multi-select #ms class="p-1" [dataSource]="treeData" [idField]="'id'" [valueField]="'bindingField'"
    [textField]="'name'" [displayType]="'Tree'" [(selectedId)]="selectedFieldIds" [fit]="true"
    (dataChange)="changeSelectField($event)" (selected)="changeRightSelect($event)">
    <ng-template farrisTemplate="text" let-data>
      <span [title]="data.bindingField"> {{ data.name }} [ {{ data.bindingField }}]</span>
    </ng-template>
  </multi-select>

</div>

<div style="width: 250px;" [hidden]="!showPropertyPanel">
  <app-property-panel [(propertyConfig)]="propertyConfig" [(propertyData)]="propertyData" [showCloseBtn]="false"
    [dynamicControl]="true" isWhiteTheme="true" (propertyChanged)="propertyChanged($event)"
    (submitModal)="submitPropertyModal($event)">
  </app-property-panel>
</div>

<ng-template #footer>
  <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>